<template>
  <div class="routes-list-container">
    <div class="routes-list-toolbar">
      <div style="">
        <el-button @click="resetAdminMenu">重置菜单</el-button>
      </div>
    </div>
    <el-table :data="routesData" height="700" style="width: 100%" @selection-change="handleSelectionChange">
      <el-table-column type="selection" width="50">
      </el-table-column>
      <el-table-column prop="path" align="center" label="页面路径" min-width="180">
      </el-table-column>
      <el-table-column prop="redirect" align="center" label="跳转路径" min-width="180">
      </el-table-column>
      <el-table-column prop="url" align="center" label="页面文件名" min-width="180">
      </el-table-column>
      <el-table-column prop="is_first" align="center" label="是否为一级页面" min-width="180">
        <template #default="{ row }">
          <span>{{ transFirst(row.is_first) }}</span>
        </template>
      </el-table-column>
      <el-table-column align="center" label="操作" min-width="180">
        <template #default="{ row }">
          <el-button @click="edit(row)">编辑
          </el-button>
          <el-button @click="deleteRouter(row)">删除
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <update-routes-form-dialog ref="update_routes_form_dialog" />
  </div>
</template>

<script>

import UpdateRoutesFormDialog from "./UpdateRoutesFormDialog";

export default {
  components: { UpdateRoutesFormDialog },
  name: "RoutesListView",
  filters: {

  },
  methods: {
    handleSelectionChange(val) {
      this.selected = val;
    },
    getRourerData(menuId) {
      let me = this;
      me.$post("/sysMenu", {
        actionType: "routesQuery",
        menuId: menuId
      }, function (response) {
        let resault = response.success;
        if (resault) {
          me.routesData = response.data;
        } else {
          me.$message.error(response.message);
        }
      });
    },
    resetAdminMenu() {
      let me = this;
      let sysMenuType = me.$parent.$parent.$parent.$refs.menu_tree.sysMenuType;
      this.$post("userGroup", {
        actionType: "resetAdminMenu",
        sysMenuType: sysMenuType
      }, function (response) {
        if (response.success) {
          me.$message.success("更新成功");
        } else {
          me.$message.warning(response.message);
        }

      });
    },
    edit(row) {
      let me = this;
      let routeId = row.router_id;
      let isFirst = row.is_first;
      let path = row.path;
      let menuPath = row.menu_path;
      let menuId = row.menu_id;
      this.$refs.update_routes_form_dialog.showDialog(routeId, menuId, isFirst, path, menuPath, function () {
        me.getRourerData(menuId);//d调用routerFormDialog，添加完成后回调用route数据刷新
      });
    },
    deleteRouter(row) {
      let me = this;
      me.$baseConfirm("确认删除该路由", function () {
        let menuId = row.menu_id;
        let routeId = row.router_id;
        me.$post("sysMenu", { actionType: "routesDelete", routeId: routeId }, function (response) {
          let resault = response.success;
          if (resault) {
            me.$message.success("删除成功");
            me.getRourerData(menuId);
          } else {
            me.$message.error(response.message);
          }
        });
      });

    },
    transFirst: function (val) {
      if (val === 1) {
        return "是";
      } else if (val === 0) {
        return "否";
      } else {
        return "异常数据";
      }
    }
  },
  data() {
    return {
      routesData: [],
      selected: []
    };
  }
};
</script>

<style lang="scss" scoped>
.routes-list-container {
  margin-top: 10px;
  border: 2px #8192a9 solid;
  border-radius: 8px;
  background-color: rgb(31 55 99 / 13%);

  .routerspan {
    margin-left: 10px;
    margin-top: 10px
  }

  .routes-list-toolbar {
    height: 60px;
  }
}
</style>
